<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn :number1="num1" :number2="num2" @numclick1="mclick1" @numclick2="mclick2"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>props:{{number1}}</h2>
            <h2>data:{{dnumber1}}</h2>
            <!-- <input type="text" v-model="dnumber1"> -->
            <input type="text" :value="dnumber1" @input="dinput1">
            <h2>props:{{number2}}</h2>
            <h2>data:{{dnumber2}}</h2>
            <!-- <input type="text" v-model="dnumber2"> -->
            <input type="text" :value= "dnumber2" @input="dinput2">
        </div>
    </template>
</body>
<script src='../js/vue.js'></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
             msg:'hello vue.js',
             num1: 1,
             num2: 0,

        },
        methods: {
            mclick1(aaa){
                this.num1 = parseFloat(aaa)
            },
            mclick2(bbb){
                this.num2 = parseFloat(bbb)
            },
        },
        components: {
            cpn: {
                template: '#cpn',
                props: {
                    number1: {
                        type:Number
                    },
                    number2: {
                        type:Number
                    }
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2
                    }
                },
                methods: {
                    dinput1(event){
                        // 1.把value的值赋值给dnumber1
                        this.dnumber1 = event.target.value
                        // 2.dnumber1的值发送出去，传递给父组件
                        this.$emit('numclick1' , this.dnumber1)
                        // 3.让dnumber2*100
                        this.dnumber2 = this.dnumber1 * 100
                        this.$emit('numclick2' , this.dnumber2)
                    },
                    dinput2(event){
                        this.dnumber2 = event.target.value
                        this.$emit('numclick2' , this.dnumber2)

                        this.dnumber1 = this.dnumber2 / 100
                        this.$emit('numclick1' , this.dnumber1)
                    }
                },
            }
        },
    })
</script>
</html>